<template>
    <div>
        <div class="question-box">
            <!-- 上栏 -->
            <el-form class="question-head">
                <div class="head-title">知识点列表</div>
                <div class="head-content">
                    <div class="head-content-left">
                        <el-form-item>
                            <!-- <div class="word">课程</div> -->
                            <el-select v-model="knowledgeHeadData.belongCourseId" class="select" placeholder="请选择课程">
                                <el-option v-for="course in knowledgeHeadData.courses" :label="course.label"
                                    :value="course.value" @click="getBankListCourse(course.value)" />
                            </el-select>
                        </el-form-item>
                        <el-button type="primary" plain @click="insertPointBtn"><i class="iconfont icon-tianjia"></i>
                            新增知识点</el-button>
                        <el-button type="danger" v-if="knowledgeIds.length > 0" plain
                            @click="deleteknowleges(knowledgeIds)">批量删除</el-button>
                    </div>
                    <div class="head-content-right">
                        <el-input v-model="search" placeholder="请输入知识点名称" class="input" @keyup.enter.native="searchByTitel">
                            <template #append>
                                <el-button class="iconfont icon-sousuo3" @click="searchByTitel"></el-button>
                            </template>
                        </el-input>
                    </div>
                </div>
            </el-form>
            <!-- 表格 -->
            <div class="table">
                <el-table :data="tableData" style="width: 100wh" @selection-change="selectKnowledgeId"
                    :header-cell-style="{ 'text-align': 'center', background: '#f0f4f7', color: '#606266' }"
                    max-height="430" :row-style="{ height: '5vh' }">
                    <el-table-column type="selection" width="35" align="center" />
                    <el-table-column label="序号" type="index" width="80" align="center" />
                    <el-table-column prop="knowledgeName" label="知识点名称" max-width="180" min-width="100px" align="center"
                        :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="knowledgeDescription" label="描述" max-width="100" align="center"
                        :show-overflow-tooltip="true" />
                    <el-table-column prop="konwledgeUsed" label="使用次数" max-width="100" align="center" />
                    <el-table-column prop="createTime" label="创建时间" max-width="150" min-width="100px" align="center" />
                    <el-table-column label="操作" align="center" min-width="90px">
                        <template #default="scope">
                            <el-button type="primary" circle class="iconfont icon-bianji"
                                @click="updatePointBtn(scope.row)" />
                                <el-popconfirm width="120" confirm-button-text="确认" cancel-button-text="取消"
                                @confirm="deleteKnowledge(scope.row)" title="确认删除?">
                                <template #reference>
                                    <el-button type="danger" circle class="iconfont icon-shanchu" />
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-dialog v-model="addDialog" align-center width="40%" class="dialog">
                <template #header class="dialog-header">
                    <div v-if="addTitle">新增知识点</div>
                    <div v-if="!addTitle">编辑知识点</div>
                </template>
                <el-form label-position="left" :model="knowledgeData" style="max-width: 400px" label-width="auto"
                    class="dialog-form">
                    <el-form-item label="所属课程">
                        <el-select v-model="knowledgeData.belongCourseId" class="dialog-select" placeholder="请选择课程">
                            <el-option v-for="course in knowledgeHeadData.courses" :label="course.label"
                                :value="course.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="知识点名">
                        <el-input v-model="knowledgeData.knowledgeName" class="dialog-input" />
                    </el-form-item>
                    <el-form-item label="知识点描述">
                        <el-input v-model="knowledgeData.knowledgeDescription" class="dialog-input" />
                    </el-form-item>
                    <el-form-item label="知识点使用次数">
                        <el-input v-model="knowledgeData.konwledgeUsed" :disabled="true" class="dialog-input" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary" @click="insertPoint" v-if="addTitle" class="dialog-btn">确定</el-button>
                        <el-button type="primary" @click="updatePoint" v-if="!addTitle"
                            class="dialog-btn">保存</el-button>
                    </div>
                </template>
            </el-dialog>
            <!-- 分页 -->
            <div class="foot">
                <div class="question-foot">
                    <el-pagination v-model:current-page="paginationData.pageNum"
                        v-model:page-size="paginationData.pageSize" :page-sizes="[20, 50, 100]"
                        :small="paginationData.small" layout="sizes, prev, pager, next"
                        :total="Number(paginationData.total)" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" class="pagination" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { getCourseListAPI, getBatchPointAPI, insertPointAPI, updatePointAPI, deleteBatchPointAPI,getCourseByIdAPI } from '@/api/api'
import { ElMessage } from 'element-plus';

const router = useRouter()
const route = useRoute()

const knowledgeHeadData = ref({
    //所属课程
    belongCourseId: '',
    //获取到的所有课程
    courses: [],
    //课程列表
    courseList: [],
})
//添加、更新操作数据
const knowledgeData = ref({
    //所属课程
    belongCourseId: '',
    //知识点名
    knowledgeName: '',
    //知识点描述
    knowledgeDescription: '',
    //使用次数
    konwledgeUsed: '0',
})
//知识点分页
const paginationData = reactive({
    pageSize: 20,
    total: 0,
    pageNum: 1,
    background: false,
    disabled: false,
    small: '',
})

//题目展示内容
const tableData = ref([])
//搜索框
const search = ref("")
//添加知识点弹框
const addDialog = ref(false)
const addTitle = ref(true)

onMounted(() => {
    //获取课程信息
    getCourseList()
})

//分页查询课程
const getCourseList = async () => {
    await getCourseListAPI().then(res => {
        if (res.data.code == 200) {
            knowledgeHeadData.value.courseList = res.data.data.list
            getCourseName(knowledgeHeadData.value.courseList)
            if (sessionStorage.getItem('knowledgeCourseId')) {
                getCourseById(sessionStorage.getItem('knowledgeCourseId'))
                getBankListCourse(sessionStorage.getItem('knowledgeCourseId'))
            }
        }
    })
}
//获取课程名
const getCourseName = (courseList) => {
    for (let item of courseList) {
        knowledgeHeadData.value.courses.push({
            label: item.courseName,
            value: item.id
        })
    }
}
//根据课程id查询课程名（单查）
const getCourseById =async (id)=>{
    await getCourseByIdAPI(id).then(res=>{
        knowledgeHeadData.value.belongCourseId = res.data.data.courseName
    })
}

// 当一页的数量改变
const handleSizeChange = (newPageSize) => {
    paginationData.pageSize = newPageSize
    getBankListCourse(sessionStorage.getItem('knowledgeCourseId'))
}
//第几页
const handleCurrentChange = (newCurrentPage) => {
    paginationData.pageNum = newCurrentPage
    getBankListCourse(sessionStorage.getItem('knowledgeCourseId'))
}

//根据课程多查知识点
const getBankListCourse = async (id) => {
    sessionStorage.setItem('knowledgeCourseId', id)
    console.log(id, 'id');
    await getBatchPointAPI(id, paginationData.pageNum, paginationData.pageSize, search.value).then(res => {
        if (res.data.code == 200) {
            paginationData.total = res.data.data.total
            tableData.value = res.data.data.list
        }
    })
}
//根据知识点名查询
const searchByTitel = () => {
    getBankListCourse(sessionStorage.getItem('knowledgeCourseId'))
}
//添加知识点按钮
const insertPointBtn = () => {
    knowledgeData.value = {}
    knowledgeData.value.konwledgeUsed = 0
    addDialog.value = true
    addTitle.value = true
}
//新增知识点  
const insertPoint = async () => {
    addDialog.value = false
    console.log(knowledgeData.value);
    await insertPointAPI(knowledgeData.value).then(res => {
        if (res.data.code == 200) {
            sessionStorage.setItem('knowledgeCourseId', knowledgeData.value.belongCourseId)
            getBankListCourse(sessionStorage.getItem('knowledgeCourseId'))
            ElMessage.success('添加成功')
        }else{
            ElMessage.warning(res.data.message)
        }
    })
}

//更新题目按钮
const updatePointBtn = async (row) => {
    addDialog.value = true
    addTitle.value = false
    knowledgeData.value = row
    console.log(row);
}
//更新题目
const updatePoint = async () => {
    const data = knowledgeData.value
    console.log(data, '============');
    await updatePointAPI(data).then(res => {
        if (res.data.code == 200) {
            addDialog.value = false
            getBankListCourse(sessionStorage.getItem('knowledgeCourseId'))
            ElMessage.success('更新成功')
        }else{
            ElMessage.warning(res.data.message)
        }
    })
}

const knowledgeIds = ref([]);
//批量获取知识点id
const selectKnowledgeId = (data) => {
    data = JSON.parse(JSON.stringify(data))
    knowledgeIds.value = []
    for (let item of data) {
        knowledgeIds.value.push(item.konwledgeId)
    }
}
//批量删除题目
const deleteknowleges = async (knowledgeIds) => {
    console.log(knowledgeIds, 'knowledgeIds');
    let ids = { "ids": knowledgeIds }
    await deleteBatchPointAPI(ids).then(res => {
        if (res.data.code == 200) {
            ElMessage.success('删除成功')
            getBankListCourse(sessionStorage.getItem('knowledgeCourseId'))
        }else{
            ElMessage.warning(res.data.message)
        }
    })
}

//单独删除题目
const deleteKnowledge = (row) => {
    const konwledgeId = []
    konwledgeId.push(row.konwledgeId)
    deleteknowleges(konwledgeId)
}

</script>

<style lang="less">
.el-dialog__header {
    margin: 0 !important;
    background-color: #f8f8f8 !important;
    border-bottom: 1px solid #eeeeee;
}

.el-dialog__footer {
    background-color: #f0f4f7 !important;
    padding: 10px !important;
    border-top: 1px solid #eeeeee;
}
</style>
<style lang="less" scoped>
.question-box {
    position: relative;
    padding: 0;
    margin: 15px 0px 0 0;
    background-color: #fff;
    border-radius: 15px;

    .question-head {
        padding-bottom: 5px;

        .head-title {
            font-size: 18px;
            font-weight: 550;
            color: grey;
            padding: 15px 10px;
        }

        .head-content {
            display: flex;
            justify-content: space-between;
            padding: 10px 25px 0 25px;

            .head-content-left {
                display: flex;

                .word {
                    padding: 0 5px;
                    font-size: 15px;
                }

                el-form-item {
                    padding: 0;
                    margin: 0;
                }

                .select {
                    width: 150px;
                    margin-right: 15px;
                }

                .btn {
                    border-radius: 23px;
                }
            }

            .head-content-right {
                display: flex;
                height: 34px;

                .icon-sousuo3:hover {
                    cursor: pointer;
                }

                // ::v-deep .el-input__wrapper {
                //     border-radius: 23px;
                // }
            }
        }
    }

    .table {
        max-height: 65vh;
        min-height: 65vh;
        margin: auto;
        width: 1250px;
    }

    .dialog {
        width: 100px;

        .dialog-header {
            background-color: aqua !important;
        }

        .dialog-form {
            margin: 0 auto;

            .dialog-select {
                width: 120px;
            }

            .dialog-input {
                width: 280px;
            }
        }

        .dialog-footer {
            display: flex;
            justify-content: end;
            margin-right: 20px;

            .dialog-btn {
                margin-top: 0;
                width: 80px;
            }
        }


    }


    .foot {
        overflow: hidden;
        display: flex;
        justify-content: center;

        .question-foot {
            display: flex;
            justify-content: center;

            .pagination {
                margin-bottom: 10px;

            }

        }
    }


}
</style>